<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body>
        <canvas width="1200" height="640" id="Main"></canvas>
        <script type="text/javascript">
            var Shader = clay.Shader;

            var renderer = new clay.Renderer({
                canvas: document.getElementById( "Main")
            });
            var scene = new clay.Scene;
            var camera = new clay.camera.Perspective({
                    aspect: renderer.getViewportAspect(),
                    far: 500
                });
            var timeline =  new clay.Timeline();
            timeline.start();

            var texture = new clay.TextureCube({
                flipY: false
            });
            texture.load({
                px: 'assets/textures/cube/skybox/px.jpg',
                nx: 'assets/textures/cube/skybox/nx.jpg',
                py: 'assets/textures/cube/skybox/py.jpg',
                ny: 'assets/textures/cube/skybox/ny.jpg',
                pz: 'assets/textures/cube/skybox/pz.jpg',
                nz: 'assets/textures/cube/skybox/nz.jpg',
            });

            var skybox = new clay.plugin.Skybox({
                scene: scene
            });
            skybox.material.set("environmentMap", texture);

            camera.position.set(5, 12, 10);
            camera.lookAt( new clay.Vector3(0, 8, 0) );

            var control = new clay.plugin.OrbitControl({
                target: camera,
                domElement: renderer.canvas,
                sensitivity: 0.4
            });

            renderer.render(scene, camera);
            timeline.on('frame', function(deltaTime) {
                control.update(deltaTime);
                renderer.render(scene, camera);
            });

        </script>
    </body>
</html>